<template>
  <div class="rebate_scroll">
    <div class="header">
      <div class="nav-bg">
        <div class="nav-bar">
          <div class="left" @click="backClick">
            <img src="../../../assets/img/rebate/ic_back_left.png" alt="" />
          </div>
          <div class="center">申请详情</div>
          <div class="right" @click="$router.push('/rebate/help')">
            常见问题
          </div>
        </div>
      </div>
      <div class="content_box">
        <div class="feedback_status">回馈状态</div>
        <div class="content_title">申请已撤回</div>
        <div class="tips-box">可重新提交此笔回馈奖励哦！</div>
      </div>
    </div>
    <div class="game_info">
      <ul class="info_list">
        <li>
          <span>游戏名</span>
          <h3>{{ info.gamename }}</h3>
        </li>
        <li>
          <span>充值小号</span>
          <h3>{{ info.xh_showname }}({{ username }})</h3>
        </li>
        <li>
          <span>充值时间</span>
          <h3>{{ info.day_time }}</h3>
        </li>
        <li>
          <span>充值金额</span>
          <h3 style="color: #ec2424">{{ info.default_total }}元</h3>
        </li>
        <li>
          <span>游戏区服</span>
          <h3>{{ info.servername }}</h3>
        </li>
        <li>
          <span>角色名</span>
          <h3>{{ info.role_name }}</h3>
        </li>
        <li>
          <span>道具申请</span>
          <h3>{{ info.prop_beizhu }}</h3>
        </li>
        <li>
          <span>备注</span>
          <h3>{{ info.user_beizhu }}</h3>
        </li>
        <li>
          <span>申请时间</span>
          <h3>{{ info.addtime | Timestamp }}</h3>
        </li>
      </ul>
    </div>
    <div class="btn_box">
      <div class="custom" @click="$router.push('/kefu')">联系客服</div>
      <div class="again" @click="againClick">重新申请</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    username: {
      type: String,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    backClick() {
      this.$router.back();
    },
    againClick() {
      this.$router.push("/rebate_page/apply_id/" + this.info.apply_id);
    },
  },
  filters: {
    Timestamp(timestamp) {
      var dateObj = new Date(timestamp * 1000);
      var year = dateObj.getYear() + 1900;
      var month = dateObj.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var theDate = dateObj.getDate();
      theDate = theDate < 10 ? "0" + theDate : theDate;
      var hour = dateObj.getHours();
      var minute = dateObj.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = dateObj.getSeconds();
      second = second < 10 ? "0" + second : second;
      return (
        year +
        "-" +
        month +
        "-" +
        theDate +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
  },
};
</script>

<style scoped>
.header {
  position: relative;
  width: 10rem;
  height: 6.026667rem;
  background: #ffffff;
}

.nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 80% 80%;
  width: 10rem;
  height: 3.92rem;
  background: linear-gradient(180deg, #f2f2f2, #bebebe);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.173333rem;
  padding: 0 0.426667rem;
}

.nav-bar .left {
  width: 1.533333rem;
  height: 0.453333rem;
}

.nav-bar .left img {
  width: 0.453333rem;
  height: 0.453333rem;
}

.nav-bar .center {
  font-size: 0.48rem;
  font-weight: 700;
  color: #222222;
}

.nav-bar .right {
  width: 1.533333rem;
  font-size: 0.373333rem;
  font-weight: 400;
  color: #ff5543;
}

.content_box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.6rem;
  width: 9.173333rem;
  height: 3.866667rem;
  background: linear-gradient(180deg, #ffffff, #e1e1e1);
  border-radius: 0.266667rem;
  box-shadow: 0 0.04rem 0.266667rem 0 rgba(0, 0, 0, 0.16);
}

.feedback_status {
  width: 1.8rem;
  height: 0.72rem;
  background: #e5e5e5;
  border-radius: 0.36rem;
  text-align: center;
  line-height: 0.72rem;
  font-size: 0.32rem;
  color: #8a8a8a;
  margin: 0.533333rem auto 0.4rem;
}

.content_title {
  font-size: 0.826667rem;
  font-weight: 700;
  text-align: center;
  color: #333333;
}

.tips-box {
  margin: 0.4rem auto 0;
  font-size: 0.32rem;
  font-weight: 400;
  text-align: center;
  color: #666666;
}

.game_info {
  margin-top: 0.4rem;
  box-sizing: border-box;
  width: 10rem;
  height: auto;
  padding: 0 0.426667rem;
}

.info_list li {
  width: 100%;
  height: 1.066667rem;
  display: flex;
  align-items: center;
}

.info_list li span {
  margin-right: 0.4rem;
  width: 1.946667rem;
  height: 0.666667rem;
  background: #f5f5f5;
  border-radius: 0.333333rem;
  font-size: 0.346667rem;
  font-weight: 400;
  text-align: center;
  line-height: 0.666667rem;
  color: #777777;
}

.info_list li h3 {
  font-size: 0.346667rem;
  font-weight: 400;
  color: #222222;
}

.btn_box {
  box-sizing: border-box;
  width: 10rem;
  height: 2.666667rem;
  padding: 0 0.96rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom {
  width: 3.786667rem;
  height: 1.04rem;
  background: #f3f3f3;
  border: 0.013333rem solid #cacaca;
  border-radius: 0.533333rem;
  font-size: 0.48rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.066667rem;
  color: #999999;
}

.again {
  width: 3.786667rem;
  height: 1.066667rem;
  background: #ff5543;
  border-radius: 0.533333rem;
  font-size: 0.48rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.066667rem;
  color: #fff;
}
</style>